<template>
  <view class="page-body">
    <u-tabs :list="list"
      :is-scroll="false"
      active-color="#1677FF"
      inactive-color="#666666"
      :current="current"
      @change="change">
    </u-tabs>
    <view class=""
      style="height: 16rpx;">
    </view>
    <!-- @click="toDetail" v-for="(li,index) in 5" :key="li.id" -->
    <view class=""
      @click="toDetail(li)"
      v-for="(li,index) in clist"
      :key="li.id">
      <orlist :item='li'>
      </orlist>
    </view>
    <u-empty mode="data"
      margin-top="100"
      v-if="isAllList==0&&clist.length==0">
    </u-empty>
    <u-loadmore
      margin-bottom="130"
      marginTop="130"
      bg-color="#F8F9FC"
      v-if="clist.length>0&&isAllList==0"
      :status="status" />
  </view>
</template>

<script>
import orlist from '../../components/orlist'
export default {
  components: {
    orlist
  },
  data() {
    return {
      list: [
        {
          name: '未支付',
          count: 5
        },
        {
          name: '未付完',
          count: 5
        },
        {
          name: '已付款',
          count: 5
        }
      ],
      current: 0,
      clist: [],
      isAllList: 1,
      page: 1,
      status: 'loading',
      loading: true,
      keywords: '',
      bid: ''
    }
  },
  onReachBottom() {
    if (this.isAllList != 0) {
      this.getList()
    }
  },
  onLoad(e) {
    uni.setNavigationBarTitle({
      title: '商家订单'
    })
    this.bid = e.id
    this.defaultData()
    this.getList()
  },
  methods: {
    toDetail(e) {
      this.$api.navigator('order_detail?id=' + e.id)
    },
    change(e) {
      this.current = e
      this.defaultData()
      this.getList()
    },
    defaultData() {
      this.isAllList = 1
      this.page = 1
      this.clist = []
      this.status = 'loading'
      this.loading = true
    },
    getList() {
      let that = this,
        params = {
          bid: this.bid,
          page: this.page,
          limit: getApp().globalData.limit,
          keywords: this.keywords,
          status: this.current + 2
        }
      this.$axios('business/businessOrder', params).then(res => {
        that.loading = false
        if (res.result.length == 0) {
          that.isAllList = 0
          that.status = 'nomore'
        } else {
          var list = that.clist
          res.result.map(e => {
            list.push(e)
          })
          that.clist = list
          that.page = that.page + 1
          if (that.clist.length < 20 && that.page == 2) that.getList()
        }
      })
    }
  }
}
</script>

<style lang="scss">
.clist {
  margin-bottom: 16rpx;
  background-color: #ffffff;

  .top {
    padding: 34rpx 32rpx;
    box-sizing: border-box;

    .code {
      font-size: 32rpx;
      font-weight: 500;
      color: #34404a;
    }

    .state {
      font-size: 30rpx;
      font-weight: 400;
      color: #2b88fe;
    }
  }

  .info {
    padding: 32rpx 32rpx 16rpx 32rpx;
    box-sizing: border-box;

    .itxt {
      padding-bottom: 16rpx;
      font-size: 28rpx;
      font-weight: 400;
      color: #34404a;
      line-height: 40rpx;
    }

    .photoShowIcon {
      width: 64rpx;
      height: 64rpx;
    }
  }

  .store {
    padding: 24rpx 32rpx;
    box-sizing: border-box;

    .simg {
      width: 56rpx;
      height: 56rpx;
      margin-right: 24rpx;
      background-color: #f2f2f2;
      border-radius: 10rpx;
    }

    .sname {
      font-size: 28rpx;
      font-weight: 500;
      color: #333333;
      line-height: 36rpx;
      padding: 0 20rpx;
    }

    .pay {
      width: 144rpx;
      height: 64rpx;
      line-height: 64rpx;
      text-align: center;
      font-size: 28rpx;
      font-weight: 400;
      color: #1677ff;
      border-radius: 32rpx;
      border: 1rpx solid #2b88fe;
    }
  }
}

page {
  background: #f8f9fc;
}
</style>
